import React, { Component } from 'react';
import {
    StyleSheet, 
    SafeAreaView,
    ScrollView,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';
import { RRCLoading, RRCToast } from 'react-native-overlayer';
import BaseComponent from '../component/BaseComponent';
import SplashScreen from 'react-native-splash-screen';
import { Echarts, echarts } from 'react-native-secharts';
import Avatar from 'react-native-badge-avatar';
import HttpUtil from '../util/HttpUtil';

// var data = [
//     {
//         name: '东四',
//         value: 54
//     },{
//         name: '太平湖',
//         value: 44
//     },{
//         name: '金盏',
//         value: 35
//     },{
//         name: '旧宫',
//         value: 30
//     }]    
    
var seriesArr = [];
var liquidFillArr = [];
var dcArr=[];
var colors=[['#389af4', '#dfeaff'],['#ff8c37', '#dfeaff'],['#ffc257', '#dfeaff'], ['#fd6f97', '#dfeaff'],['#a181fc', '#dfeaff']];

export default class Statistics extends BaseComponent {
    constructor(props){
        super(props);
        this.state = {
            image: '',
            statistics: null,
            option: {},
            option1: {},
          }
        this.echart1 = React.createRef();
        this.echart2 = React.createRef();
    }

    componentDidMount() {
        SplashScreen.hide();
        RRCLoading.setLoadingOptions({
            text: '加载中',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
            loadingTextStyle: {}
        })
        RRCLoading.show();
        HttpUtil.post('app/assetIndex', null)
        .then(result => { 
            if(result.httpCode == 200){
                RRCLoading.hide();   
                this.setState({
                    statistics: result.data,
                });
                result.data.dataCenterList.forEach( function(item, index){
                    seriesArr.push({
                        name: item.dataCenterName,
                        type: 'pie',
                        clockWise: false,
                        radius: [index * 20 + 10 + 60, index * 20 + 10 + 70],
                        itemStyle:  {
                            normal: {
                                color: colors[index][0],
                                shadowColor: colors[index][0],
                                shadowBlur: 0,
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                            }
                        },
                        hoverAnimation: false,
                        center: ['50%', '50%'],
                        data: [{
                            value: ((item.assetCount ? item.assetCount : 0) / result.data.allAssetCount * 100),
                        },{
                            value: 100 - ((item.assetCount ? item.assetCount : 0) / result.data.allAssetCount * 100),
                            name: 'invisible',
                            itemStyle: {
                                normal: {
                                    color: colors[index][1],
                                    
                                },
                                emphasis: {
                                    color: colors[index][1]
                                }
                            }
                        }]
                    });
                    liquidFillArr.push((item.assetCount ? item.assetCount : 0) / result.data.allAssetCount);
                    dcArr.push({
                        name: item.dataCenterName,
                        value: item.assetCount,
                    });
                });

                seriesArr.push(
                    {
                        type: 'liquidFill',
                        data: liquidFillArr,
                        color: ['#389af4','#ff8c37','#ffc257','#fd6f97','#a181fc'],
                        center: ['50%', '50%'],
                        backgroundStyle: {
                            color: '#758DFF'
                        },
                        label: {
                            normal: {
                                formatter: '',
                                textStyle: {
                                    fontSize: 100,
                                }
                            }
                        },
                        outline: {
                            itemStyle: {
                                borderWidth: 0
                            },
                            borderDistance: 0
                        }
                    }
                );
        

                // data.forEach(function(item, index){
                //     seriesArr.push(
                //         {
                //             name: item.name,
                //             type: 'pie',
                //             clockWise: false,
                //             radius: [index * 20 + 10 + 60, index * 20 + 10 + 70],
                //             itemStyle:  {
                //                 normal: {
                //                     color: colors[index][0],
                //                     shadowColor: colors[index][0],
                //                     shadowBlur: 0,
                //                     label: {
                //                         show: false
                //                     },
                //                     labelLine: {
                //                         show: false
                //                     },
                //                 }
                //             },
                //             clockWise: true,
                //             hoverAnimation: false,
                //             center: ['50%', '50%'],
                //             data: [{
                //                 value: item.value,
                //                 // label: {
                //                 //     normal: {
                //                 //         formatter: function(params){
                //                 //             return params.value+'%';
                //                 //         },
                //                 //         position: 'center',
                //                 //         show: true,
                //                 //         textStyle: {
                //                 //             fontSize: '20',
                //                 //             fontWeight: 'bold',
                //                 //             color: colors[index][0]
                //                 //         }
                //                 //     }
                //                 // },
                //             }, {
                //                 value: 100-item.value,
                //                 name: 'invisible',
                //                 itemStyle: {
                //                     normal: {
                //                         color: colors[index][1],
                                        
                //                     },
                //                     emphasis: {
                //                         color: colors[index][1]
                //                     }
                //                 }
                //             }]
                //         }    
                //     )
                // });
        
                // seriesArr.push(
                //     {
                //         type: 'liquidFill',
                //         // itemStyle: {
                //         //     normal: {
                //         //         opacity: 0.4,
                //         //         shadowBlur: 0,
                //         //         shadowColor: 'blue'
                //         //     }
                //         // },
                //         // name: '今日完成进度',
                //         data: [0.8, 0.5, 0.4, 0.3],
                //         color: ['#389af4','#ff8c37','#ffc257','fd6f97'],
                //         center: ['50%', '50%'],
                //         backgroundStyle: {
                //             color: '#758DFF'
                //         },
                //         label: {
                //             normal: {
                //                 formatter: '',
                //                 textStyle: {
                //                     fontSize: 100,
                //                 }
                //             }
                //         },
                //         outline: {
                //             itemStyle: {
                //                 borderWidth: 0
                //             },
                //             borderDistance: 0
                //         }
                //     }
                // );
        
                this.setState({
                    option: {
                        title: {
                            top: '40%',
                            left: 'center',
                            text: result.data.allAssetCount,
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontSize: 40
                            },
                            subtext: '资源资产总数量',
                            subtextStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        series: seriesArr,
                    },
                });

                //console.log(dcArr);

                this.setState({
                    option1: {
                        title: {
                            top: '43%',
                            left: 'center',
                            text: result.data.allRoomCount,
                            textStyle: {
                                color: '#333',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontSize: 20
                            },
                            subtext: '机房总数',
                            subtextStyle: {
                                color: '#333',
                                fontSize: 16
                            }
                        },
                        color: ['#389af4','#ff8c37','#ffc257','#fd6f97','#a181fc'],
                        tooltip: {
                            show:false,
                        },
                        series: [{
                            zlevel: 1,
                            name: '数据',
                            type: 'pie',
                            center: ['50%', '50%'],
                            radius: [50, 56],
                            startAngle: '0',
                            hoverAnimation: false,
                            label: {
                                normal: {
                                    show: false,
                                }
                            },
                            itemStyle: {
                                normal: {
                                    
                                }
                            },
                            data: dcArr
                        }]
                    },
                });
                
            }else{
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 3000);
            }
        })
        .catch(error => {
            RRCLoading.hide();
            RRCToast.show('系统异常', 1, 3000);
            //console.log(error);
        })
        
       
    }

    renderDataCenter = (dcs) => { 
        if(dcs){
            let dcNodes = [];
            for(let i = 0;i<dcs.length;i++){
                dcNodes.push(
                    <View style={{ justifyContent:'center', alignItems:'center', width: '25%', marginTop: getPixel(10) }}>
                        <Avatar
                            size={70}
                            name={dcs[i].dataCenterName}
                            badge={dcs[i].roomCount}
                            //source="https://avatars3.githubusercontent.com/u/8385255?s=460&v=4"
                        />
                        <Text style={{ color: '#999', fontSize: getPixel(14), marginTop: getPixel(10) }}>{dcs[i].dataCenterName}</Text>
                    </View>
                );
            }
            return dcNodes;
        }else{
            return null;
        }
    }

    renderDataCenterLable = (dcs) => {
        if(dcs){
            let dcNodes = [];
            for(let i = 0;i<dcs.length;i++){
                dcNodes.push(
                    <View style={{ justifyContent:'center', alignItems:'center', width: '25%' }}>
                        <View style={{ flexDirection: 'row', justifyContent:'center', alignItems:'center', height: getPixel(30) }}>
                            <View style={{backgroundColor:colors[i][0],width:10,height:10,borderRadius:15}}/>
                            <Text style={{fontSize: getPixel(16), color: '#FFF'}}> { dcs[i].dataCenterName }</Text>
                        </View>
                        <Text style={{fontSize: getPixel(16),color: '#FFF'}}> { (dcs[i].assetCount ? dcs[i].assetCount : 0) / this.state.statistics.allAssetCount }%</Text>
                    </View>
                    
                );
            }
            return dcNodes;
        }else{
            return null;
        }
    }

    renderRoom = (dcs) => {
        if(dcs){
            let dcNodes = [];
            for(let i = 0;i<dcs.length;i++){
                dcNodes.push(
                    <View style={{flexDirection: 'row', height: getPixel(30), alignItems: 'center'}}>
                        <View style={{width: '25%', flexDirection: 'row',height: getPixel(30), alignItems: 'center'}}>
                            <View style={{backgroundColor:colors[i][0],width:10,height:10,borderRadius:15}}/>
                            <Text style={{textAlign: 'left', color: '#999'}}> { dcs[i].dataCenterName }</Text>
                        </View>
                        <Text style={{ width: '25%', textAlign: 'center', color: '#999'}}>{ dcs[i].roomCount }</Text>
                        <Text style={{ width: '25%', textAlign: 'center', color: '#999'}}>{ dcs[i].rackCount }</Text>
                        <Text style={{ width: '25%', textAlign: 'center', color: '#999'}}>{ dcs[i].assetCount }</Text>
                    </View>
                );
            }
            return dcNodes;
        }else{
            return null;
        }
    }

    renderRoomInfo = (rooms) => {
        if(rooms){
            let roomNodes = [];
            for(let i = 0;i<rooms.length;i++){
                roomNodes.push(
                    <View>
                        <View style={{ marginTop: getPixel(20) }}>
                            <Text style={{ fontSize: getPixel(16) }}>{ rooms[i].roomName }</Text>
                        </View>
                        <View style={{ marginTop: getPixel(20), flexDirection: 'row' }}>
                            <View style={{ width: '50%', flexDirection: 'row' }}>   
                                <Text style={{ color: '#999', fontSize: getPixel(15)}}>设备总数</Text><Text style={{ fontSize: getPixel(15), paddingLeft: getPixel(10)}}>{ rooms[i].assetCount ? rooms[i].assetCount : 0 }</Text>                            
                            </View>
                            <View style={{ width: '50%', flexDirection: 'row' }}>  
                                <Text style={{ color: '#999', fontSize: getPixel(15)}}>资产占比</Text><Text style={{ fontSize: getPixel(15), paddingLeft: getPixel(10)}}>{ rooms[i].assetProp }%</Text>                               
                            </View>
                        </View>
                        <View style={{ marginTop: getPixel(10), flexDirection: 'row' }}>
                            <View style={{ width: '50%', flexDirection: 'row' }}>   
                                <Text style={{ color: '#999', fontSize: getPixel(15)}}>机柜数量</Text><Text style={{ fontSize: getPixel(15), paddingLeft: getPixel(10)}}>{ rooms[i].rackCount ? rooms[i].rackCount: 0 }</Text>                            
                            </View>
                            <View style={{ width: '50%', flexDirection: 'row' }}>  
                                <Text style={{ color: '#999', fontSize: getPixel(15)}}>机柜占比</Text><Text style={{ fontSize: getPixel(15), paddingLeft: getPixel(10)}}>{ rooms[i].rackProp }%</Text>                               
                            </View>
                        </View>
                        <View style={{ marginTop: getPixel(10), marginBottom: getPixel(20) }}>
                            <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                <Text style={{ width: '20%'}}>服务器</Text>
                                <View style={{ width: '58%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                    <View style={{ width: rooms[i].assetCount && rooms[i].assetCount !== 0 ? (rooms[i].serviceCount / rooms[i].assetCount) * 100 + '%' : '0%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                </View>
                                <Text style={{ width: '22%', paddingLeft: getPixel(10)}}>{ rooms[i].assetCount && rooms[i].assetCount !== 0 ? (rooms[i].serviceCount / rooms[i].assetCount) * 100 + '%' : '0%' }</Text>
                            </View>
                            <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                <Text style={{ width: '20%'}}>存储设备</Text>
                                <View style={{ width: '58%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                    <View style={{ width: rooms[i].assetCount && rooms[i].assetCount !== 0 ? (rooms[i].storageCount / rooms[i].assetCount) * 100 + '%' : '0%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                </View>
                                <Text style={{ width: '22%', paddingLeft: getPixel(10)}}>{ rooms[i].assetCount && rooms[i].assetCount !== 0 ? (rooms[i].storageCount / rooms[i].assetCount) * 100 + '%' : '0%' }</Text>
                            </View>
                            <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                <Text style={{ width: '20%'}}>网络设备</Text>
                                <View style={{ width: '58%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                    <View style={{ width: rooms[i].assetCount && rooms[i].assetCount !== 0 ? (rooms[i].networkCount / rooms[i].assetCount) * 100 + '%' : '0%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                </View>
                                <Text style={{ width: '22%', paddingLeft: getPixel(10)}}>{ rooms[i].assetCount && rooms[i].assetCount !== 0 ? (rooms[i].networkCount / rooms[i].assetCount) * 100 + '%' : '0%' }</Text>
                            </View>
                            <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                <Text style={{ width: '20%'}}>U位</Text>
                                <View style={{ width: '58%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                    <View style={{ width: rooms[i].uUseProp + '%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                </View>
                                <Text style={{ width: '22%', paddingLeft: getPixel(10)}}>{ rooms[i].uUseProp } %</Text>
                            </View>
                            <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                <Text style={{ width: '20%'}}>机柜</Text>
                                <View style={{ width: '58%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                    <View style={{ width: rooms[i].rackUseProp  + '%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                </View>
                                <Text style={{ width: '22%', paddingLeft: getPixel(10)}}>{ rooms[i].rackUseProp } %</Text>
                            </View>
                        </View>
                    </View>
                )
            }
            return roomNodes;
        }else{
            return null;
        }
    }

    back = () =>{    
        this.props.navigation.navigate('Main');
    } 

    render() {
        return (
            <SafeAreaView style={styles.container}>
                 <View style={ styles.title }>
                    <View style={{ width: getPixel(40), justifyContent:'center', alignItems:'center'}}>
                        <TouchableOpacity onPress={() => this.back()}>
                            <Image source={ require('../images/backw.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                        </TouchableOpacity>
                    </View>
                    <View style={{ width: getScreenWidth() - getPixel(80), justifyContent:'center', alignItems:'center' }}>
                        <Text style={{ fontSize: getPixel(17), color:'#fff' }}>IT资产管理系统</Text>
                    </View>
                    <View style={{ width: getPixel(40), justifyContent:'center', alignItems:'center'}}>
                    </View>
                    
                 </View>
                 <ScrollView style={{ backgroundColor: '#FAFAFA' }}>
                    <View style={ styles.assetChart }>
                        <View style={{ width: getScreenWidth() - getPixel(40), height: getPixel(40) }}>
                            <Text style={{ height: getPixel(40), lineHeight: getPixel(40), color: '#A7B9FF', fontSize: getPixel(15) }}>统计时间：{ this.state.statistics ? this.state.statistics.timeString : ''}</Text>
                        </View>
                        <View style={{ width: getScreenWidth() - getPixel(40), height: getPixel(270),marginTop: getPixel(15), justifyContent:'center' }}>
                            <Echarts ref={this.echart1} option={this.state.option} />  
                        </View>
                        <View style={{ width: getScreenWidth() - getPixel(40), height: getPixel(30), marginTop: getPixel(15), flexDirection:'row' }}>
                            { this.state.statistics ? this.renderDataCenterLable(this.state.statistics.dataCenterList ) : null }
                        </View>
                    </View>
                    <View style={{ alignItems:'center', borderRadius: 8, elevation: 3, shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.5, shadowRadius: 10, shadowColor: '#DDD', position: 'relative', marginBottom: getPixel(10), marginTop: getPixel(-90), marginLeft: getPixel(20), width: getScreenWidth() - getPixel(40), height: getPixel(160), backgroundColor: '#FFF' }}>
                        <View style={{ alignItems:'center', height:getPixel(90), width:getScreenWidth() - getPixel(80), borderBottomColor:'#EBEDF9',borderBottomWidth: getPixel(1) }}>
                            <Text style={{ marginTop:getPixel(30), color: '#999', fontSize: getPixel(14) }}>资源资产总数量</Text>
                            <Text style={{ marginTop:getPixel(2), fontSize: getPixel(24) }}>{ this.state.statistics ? this.state.statistics.allAssetCount + this.state.statistics.allRackCount : '0'}</Text>
                        </View>
                        <View style={{ width:getScreenWidth() - getPixel(80), flexDirection:'row',marginTop: getPixel(8) }}>
                            <View style={{ justifyContent:'center', alignItems:'center', width: '33.3%'}}>
                                <Text style={{ color: '#999', fontSize: getPixel(14) }}>机房地点</Text>
                                <Text style={{ marginTop:getPixel(5), fontSize: getPixel(16) }}>{this.state.statistics ? this.state.statistics.allDataCenterCount : '0'}</Text>
                            </View>
                            <View style={{ justifyContent:'center', alignItems:'center', width: '33.3%'}}>
                                <Text style={{ color: '#999', fontSize: getPixel(14) }}>机房数量</Text>
                                <Text style={{ marginTop:getPixel(5), fontSize: getPixel(16) }}>{this.state.statistics ? this.state.statistics.allRoomCount : '0'}</Text>
                            </View>
                            <View style={{ justifyContent:'center', alignItems:'center', width: '33.3%'}}>
                                <Text style={{ color: '#999', fontSize: getPixel(14) }}>机柜数量</Text>
                                <Text style={{ marginTop:getPixel(5), fontSize: getPixel(16) }}>{this.state.statistics ? this.state.statistics.allRackCount : '0'}</Text>
                            </View>
                        </View>
                    </View>
                    <View style={{ marginLeft: getPixel(20), width: getScreenWidth() - getPixel(40) }}>
                        <Text style={{ marginTop: getPixel(10), color: '#333333', fontWeight:'600',fontSize: getPixel(17) }}>中国联通北京机房分区</Text>
                        <View style={{ width:getScreenWidth() - getPixel(40), flexDirection:'row',marginTop: getPixel(8), marginBottom: getPixel(10) }} >
                            { this.state.statistics ? this.renderDataCenter(this.state.statistics.dataCenterList ) : null }
                        </View>
                    </View>
                    <View style={{ marginLeft: getPixel(20), width: getScreenWidth() - getPixel(40), borderRadius: 8, elevation: 3, shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.5, shadowRadius: 10, shadowColor: '#DDD', backgroundColor: '#FFF',minHeight: getPixel(130), paddingLeft: getPixel(20), paddingRight: getPixel(20),paddingTop: getPixel(10) }}>
                        <View style={{ flexDirection: 'row', alignItems:'center', height: getPixel(50), borderBottomColor: '#EBEDF9', borderBottomWidth: getPixel(1)}}>
                            <Image source={ require('../images/point.png')} style={{width: getPixel(10),height: getPixel(16) }} />
                            <Text style={{color:'#333', fontSize: getPixel(18), height: getPixel(25), lineHeight: getPixel(25), marginLeft: getPixel(10)}}>机房分布</Text>
                        </View>
                        <View style={{ flexDirection: 'row', marginTop: getPixel(10) }}>
                            <View style={{width: '40%', minHeight: getPixel(130), height: this.state.statistics ? this.state.statistics.dataCenterList.length * 20 : 130 , justifyContent:'center', alignItems:'center'}}>
                                <View style={{ width:'100%', marginLeft: getPixel(-8) }}><Echarts ref={this.echart2} option={this.state.option1} /></View>
                            </View>
                            <View style={{width: '60%',height: '100%', marginBottom: getPixel(20)}}>
                                <View style={{flexDirection: 'row', height: getPixel(30), alignItems: 'center' }}>
                                    <Text style={{ width: '25%', textAlign: 'center'}}>地点</Text>
                                    <Text style={{ width: '25%', textAlign: 'center'}}>机房</Text>
                                    <Text style={{ width: '25%', textAlign: 'center'}}>机柜</Text>
                                    <Text style={{ width: '25%', textAlign: 'center'}}>资产</Text>
                                </View>
                                { this.state.statistics ? this.renderRoom(this.state.statistics.dataCenterList) : null }
                            </View>
                        </View>
                    </View>
                    <View style={{ margin: getPixel(20), width: getScreenWidth() - getPixel(40), borderRadius: 8, elevation: 3, shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.5, shadowRadius: 10, shadowColor: '#DDD', backgroundColor: '#FFF',minHeight: getPixel(200), paddingLeft: getPixel(20), paddingRight: getPixel(20),paddingTop: getPixel(10) }}>
                        <View style={{ flexDirection: 'row', alignItems:'center', height: getPixel(50), borderBottomColor: '#EBEDF9', borderBottomWidth: getPixel(1)}}>
                            <Image source={ require('../images/point.png')} style={{width: getPixel(10),height: getPixel(16) }} />
                            <Text style={{color:'#333', fontSize: getPixel(18), height: getPixel(25), lineHeight: getPixel(25), marginLeft: getPixel(10)}}>资产详情</Text>
                        </View>
                        { this.state.statistics ? this.renderRoomInfo(this.state.statistics.roomDataList) : null }
                        {/* <View>
                            <View style={{ marginTop: getPixel(20) }}>
                                <Text style={{ fontSize: getPixel(16) }}>东四5层机房</Text>
                            </View>
                            <View style={{ marginTop: getPixel(20), flexDirection: 'row' }}>
                                <View style={{ width: '50%', flexDirection: 'row' }}>   
                                    <Text style={{ color: '#999', fontSize: getPixel(15)}}>设备总数</Text><Text style={{ fontSize: getPixel(15), paddingLeft: getPixel(10)}}>2989</Text>                            
                                </View>
                                <View style={{ width: '50%', flexDirection: 'row' }}>  
                                    <Text style={{ color: '#999', fontSize: getPixel(15)}}>资产占比</Text><Text style={{ fontSize: getPixel(15), paddingLeft: getPixel(10)}}>86.2%</Text>                               
                                </View>
                            </View>
                            <View style={{ marginTop: getPixel(10), flexDirection: 'row' }}>
                                <View style={{ width: '50%', flexDirection: 'row' }}>   
                                    <Text style={{ color: '#999', fontSize: getPixel(15)}}>机柜数量</Text><Text style={{ fontSize: getPixel(15), paddingLeft: getPixel(10)}}>889</Text>                            
                                </View>
                                <View style={{ width: '50%', flexDirection: 'row' }}>  
                                    <Text style={{ color: '#999', fontSize: getPixel(15)}}>机柜占比</Text><Text style={{ fontSize: getPixel(15), paddingLeft: getPixel(10)}}>24.2%</Text>                               
                                </View>
                            </View>
                            <View style={{ marginTop: getPixel(10), marginBottom: getPixel(20) }}>
                                <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                    <Text style={{ width: '20%'}}>服务器</Text>
                                    <View style={{ width: '65%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                        <View style={{ width: '40%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                    </View>
                                    <Text style={{ width: '15%', paddingLeft: getPixel(10)}}>67</Text>
                                </View>
                                <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                    <Text style={{ width: '20%'}}>存储设备</Text>
                                    <View style={{ width: '65%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                        <View style={{ width: '80%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                    </View>
                                    <Text style={{ width: '15%', paddingLeft: getPixel(10)}}>54</Text>
                                </View>
                                <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                    <Text style={{ width: '20%'}}>网络设备</Text>
                                    <View style={{ width: '65%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                        <View style={{ width: '34%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                    </View>
                                    <Text style={{ width: '15%', paddingLeft: getPixel(10)}}>34%</Text>
                                </View>
                                <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                    <Text style={{ width: '20%'}}>U位</Text>
                                    <View style={{ width: '65%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                        <View style={{ width: '64%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                    </View>
                                    <Text style={{ width: '15%', paddingLeft: getPixel(10)}}>64%</Text>
                                </View>
                                <View style={{ flexDirection: 'row',height: getPixel(30), alignItems:'center' }}>
                                    <Text style={{ width: '20%'}}>机柜</Text>
                                    <View style={{ width: '65%', height: getPixel(12), backgroundColor: '#E7E9F1', borderRadius: 6}}>
                                        <View style={{ width: '77%', height: getPixel(12), backgroundColor: '#4B69DE', borderRadius: 6}}></View>
                                    </View>
                                    <Text style={{ width: '15%', paddingLeft: getPixel(10)}}>77%</Text>
                                </View>
                            </View>
                        </View> */}
                    </View>
                 </ScrollView> 
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
    },
    title: {
        backgroundColor: '#6D72FF',
        width: getScreenWidth(),
        height: getPixel(50),
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 4,
        flexDirection: 'row',
    },
    titleText: {
        color: '#FFF',
        fontSize: getPixel(20),
    },
    assetChart: {
        backgroundColor: '#6D72FF',
        width: getScreenWidth(),
        height: getPixel(500),
        paddingLeft: getPixel(20),
        paddingRight: getPixel(20),
    },
});